<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Tabs name="main_tabs_child" size="small">
          <TabPane tab="main_tabs_child" label="主要配置">
            <Collapse value="0" accordion>
              <Panel>
                主场景配置
                <div slot="content">
                  <Form :label-width="120">
                    <FormItem label="显示区域网格">
                      <Tooltip content="关闭显示区域网格，将会连带关闭所有轴线或标签的显示" :max-width="200" placement="left">
                        <i-switch size="small" v-model="chartOption.grid3D.show"></i-switch>
                      </Tooltip>
                    </FormItem>
                    <FormItem label="场景宽度">
                      <InputNumber size="small" :max="10000" :min="0" :step="100"
                                   v-model="chartOption.grid3D.boxWidth" :active-change="false"></InputNumber>
                    </FormItem>
                    <FormItem label="场景高度">
                      <InputNumber size="small" :max="10000" :min="0" :step="100"
                                   v-model="chartOption.grid3D.boxHeight" :active-change="false"></InputNumber>
                    </FormItem>
                    <FormItem label="场景深度">
                      <InputNumber size="small" :max="10000" :min="0" :step="100"
                                   v-model="chartOption.grid3D.boxDepth" :active-change="false"></InputNumber>
                    </FormItem>
                    <Collapse value="0" accordion>
                      <Panel>
                        鼠标选择、视角控制
                        <div slot="content">
                          <FormItem label="自动旋转">
                            <Tooltip content="开启自动旋转会占用较大的CPU资源，非必要情况下不建议开启" :max-width="200" placement="left">
                              <i-switch size="small" v-model="chartOption.grid3D.viewControl.autoRotate"></i-switch>
                            </Tooltip>
                          </FormItem>
                          <FormItem label="自动旋转方向">
                            <Select size="small" v-model="chartOption.grid3D.viewControl.autoRotateDirection">
                              <Option value="cw">顺时针</Option>
                              <Option value="ccw">逆时针</Option>
                            </Select>
                          </FormItem>
                          <FormItem label="视角距主体距离">
                            <InputNumber size="small" :max="10000" :min="0" :step="100"
                                         v-model="chartOption.grid3D.viewControl.distance" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="垂直旋转角度">
                            <InputNumber size="small" :max="90" :min="-90" :step="10"
                                         v-model="chartOption.grid3D.viewControl.alpha" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="横向旋转角度">
                            <InputNumber size="small" :max="360" :min="-360" :step="10"
                                         v-model="chartOption.grid3D.viewControl.beta" :active-change="false"></InputNumber>
                          </FormItem>
                        </div>
                      </Panel>
                      <Panel>
                        光照相关的设置
                        <div slot="content">
                          <FormItemPanel title="主光源配置">
                            <FormItem label="颜色">
                              <PnColorPicker size="small" v-model="chartOption.grid3D.light.main.color" alpha recommend/>
                            </FormItem>
                            <FormItem label="强度">
                              <InputNumber size="small" :max="10" :min="0" :step="0.1"
                                           v-model="chartOption.grid3D.light.main.intensity" :active-change="false"></InputNumber>
                            </FormItem>
                            <FormItem label="是否投射阴影">
                              <i-switch size="small" v-model="chartOption.grid3D.light.main.shadow"></i-switch>
                            </FormItem>
                            <FormItem label="阴影的质量">
                              <Select size="small" v-model="chartOption.grid3D.light.main.shadowQuality">
                                <Option value="low">low</Option>
                                <Option value="medium">medium</Option>
                                <Option value="high">high</Option>
                                <Option value="ultra">ultra</Option>
                              </Select>
                            </FormItem>
                            <FormItem label="垂直旋转角度">
                              <InputNumber size="small" :max="90" :min="-90" :step="10"
                                           v-model="chartOption.grid3D.light.main.alpha" :active-change="false"></InputNumber>
                            </FormItem>
                            <FormItem label="横向旋转角度">
                              <InputNumber size="small" :max="360" :min="-360" :step="10"
                                           v-model="chartOption.grid3D.light.main.beta" :active-change="false"></InputNumber>
                            </FormItem>
                          </FormItemPanel>
                        </div>
                      </Panel>
                      <Panel>
                        坐标轴指示线
                        <div slot="content">

                          <FormItem label="线色">
                            <PnColorPicker size="small" v-model="chartOption.grid3D.axisPointer.lineStyle.color" alpha recommend/>
                          </FormItem>
                          <FormItem label="线透明度">
                            <InputNumber size="small" :max="1" :min="0" :step="0.1"
                                         v-model="chartOption.grid3D.axisPointer.lineStyle.opacity" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="线宽">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.grid3D.axisPointer.lineStyle.width" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItemPanel title="指示标签">
                            <span>格式化</span>
                            <CodeEditor v-model="chartOption.grid3D.axisPointer.label.formatter"
                                        :placeholder="'(value, valueAll) => {\n  return Math.floor(value)\n}'" :showLint="false"></CodeEditor>
                            <FormItem label="字体颜色">
                              <PnColorPicker size="small" v-model="chartOption.grid3D.axisPointer.label.textStyle.color" alpha recommend/>
                            </FormItem>
                            <FormItem label="字体大小">
                              <InputNumber size="small" :max="100" :min="0" :step="1"
                                           v-model="chartOption.grid3D.axisPointer.label.textStyle.fontSize" :active-change="false"></InputNumber>
                            </FormItem>
                            <FormItem label="显示">
                              <i-switch size="small" v-model="chartOption.grid3D.axisPointer.label.show"></i-switch>
                            </FormItem>
                          </FormItemPanel>
                        </div>
                      </Panel>
                    </Collapse>
                  </Form>
                </div>
              </Panel>
              <Panel>
                x轴
                <div slot="content">
                  <Form :label-width="120">
                    <FormItem label="坐标轴名称">
                      <Input size="small" v-model="chartOption.xAxis3D.name"/>
                    </FormItem>
                    <FormItem label="名称与轴线间距">
                      <InputNumber size="small" :max="100" :min="0" :step="1"
                                   v-model="chartOption.xAxis3D.nameGap" :active-change="false"></InputNumber>
                    </FormItem>
                    <FormItemPanel title="坐标轴名称样式">
                      <FormItem label="颜色">
                        <PnColorPicker size="small" v-model="chartOption.xAxis3D.nameTextStyle.color" alpha recommend/>
                      </FormItem>
                      <FormItem label="字号">
                        <InputNumber size="small" :max="100" :min="0" :step="1"
                                     v-model="chartOption.xAxis3D.nameTextStyle.fontSize" :active-change="false"></InputNumber>
                      </FormItem>
                    </FormItemPanel>
                    <Collapse value="0" accordion>
                      <Panel>
                        坐标轴轴线
                        <div slot="content">
                          <FormItem label="颜色">
                            <PnColorPicker size="small" v-model="chartOption.xAxis3D.axisLine.lineStyle.color" alpha recommend/>
                          </FormItem>
                          <FormItem label="透明度">
                            <InputNumber size="small" :max="1" :min="0" :step="0.1"
                                         v-model="chartOption.xAxis3D.axisLine.lineStyle.opacity" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="线宽">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.xAxis3D.axisLine.lineStyle.width" :active-change="false"></InputNumber>
                          </FormItem>
                        </div>
                      </Panel>
                      <Panel>
                        坐标轴刻度
                        <div slot="content">
                          <FormItem label="显示">
                            <i-switch size="small" v-model="chartOption.xAxis3D.axisTick.show"></i-switch>
                          </FormItem>
                          <FormItem label="刻度的长度">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.xAxis3D.axisTick.length" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="颜色">
                            <PnColorPicker size="small" v-model="chartOption.xAxis3D.axisTick.lineStyle.color" alpha recommend/>
                          </FormItem>
                          <FormItem label="透明度">
                            <InputNumber size="small" :max="1" :min="0" :step="0.1"
                                         v-model="chartOption.xAxis3D.axisTick.lineStyle.opacity" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="线宽">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.xAxis3D.axisTick.lineStyle.width" :active-change="false"></InputNumber>
                          </FormItem>
                        </div>
                      </Panel>
                      <Panel>
                        坐标轴刻度标签
                        <div slot="content">
                          <FormItem label="显示">
                            <i-switch size="small" v-model="chartOption.xAxis3D.axisLabel.show"></i-switch>
                          </FormItem>
                          <FormItem label="标签与轴线间距">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.xAxis3D.axisLabel.margin" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="颜色">
                            <PnColorPicker size="small" v-model="chartOption.xAxis3D.axisLabel.textStyle.color" alpha recommend/>
                          </FormItem>
                          <FormItem label="字号">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.xAxis3D.axisLabel.textStyle.fontSize" :active-change="false"></InputNumber>
                          </FormItem>
                        </div>
                      </Panel>
                      <Panel>
                        坐标轴区域内轴线
                        <div slot="content">
                          <FormItem label="显示">
                            <i-switch size="small" v-model="chartOption.xAxis3D.splitLine.show"></i-switch>
                          </FormItem>
                          <FormItem label="颜色">
                            <PnColorPicker size="small" v-model="chartOption.xAxis3D.splitLine.lineStyle.color" alpha recommend/>
                          </FormItem>
                          <FormItem label="透明度">
                            <InputNumber size="small" :max="1" :min="0" :step="0.1"
                                         v-model="chartOption.xAxis3D.splitLine.lineStyle.opacity" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="线宽">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.xAxis3D.splitLine.lineStyle.width" :active-change="false"></InputNumber>
                          </FormItem>
                        </div>
                      </Panel>
                      <Panel>
                        斑马纹分隔区域
                        <div slot="content">
                          <FormItem label="显示">
                            <i-switch size="small" v-model="chartOption.xAxis3D.splitArea.show"></i-switch>
                          </FormItem>
                          <FormItemPanel title="颜色">
                            <FormItem label="颜色1">
                              <PnColorPicker size="small" v-model="chartOption.xAxis3D.splitArea.areaStyle.color[0]" alpha recommend/>
                            </FormItem>
                            <FormItem label="颜色2">
                              <PnColorPicker size="small" v-model="chartOption.xAxis3D.splitArea.areaStyle.color[1]" alpha recommend/>
                            </FormItem>
                          </FormItemPanel>
                        </div>
                      </Panel>
                    </Collapse>
                  </Form>
                </div>
              </Panel>
              <Panel>
                y轴
                <div slot="content">
                  <Form :label-width="120">
                    <FormItem label="坐标轴名称">
                      <Input size="small" v-model="chartOption.yAxis3D.name"/>
                    </FormItem>
                    <FormItem label="名称与轴线间距">
                      <InputNumber size="small" :max="100" :min="0" :step="1"
                                   v-model="chartOption.yAxis3D.nameGap" :active-change="false"></InputNumber>
                    </FormItem>
                    <FormItemPanel title="坐标轴名称样式">
                      <FormItem label="颜色">
                        <PnColorPicker size="small" v-model="chartOption.yAxis3D.nameTextStyle.color" alpha recommend/>
                      </FormItem>
                      <FormItem label="字号">
                        <InputNumber size="small" :max="100" :min="0" :step="1"
                                     v-model="chartOption.yAxis3D.nameTextStyle.fontSize" :active-change="false"></InputNumber>
                      </FormItem>
                    </FormItemPanel>
                    <Collapse value="0" accordion>
                      <Panel>
                        坐标轴轴线
                        <div slot="content">
                          <FormItem label="颜色">
                            <PnColorPicker size="small" v-model="chartOption.yAxis3D.axisLine.lineStyle.color" alpha recommend/>
                          </FormItem>
                          <FormItem label="透明度">
                            <InputNumber size="small" :max="1" :min="0" :step="0.1"
                                         v-model="chartOption.yAxis3D.axisLine.lineStyle.opacity" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="线宽">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.yAxis3D.axisLine.lineStyle.width" :active-change="false"></InputNumber>
                          </FormItem>
                        </div>
                      </Panel>
                      <Panel>
                        坐标轴刻度
                        <div slot="content">
                          <FormItem label="显示">
                            <i-switch size="small" v-model="chartOption.yAxis3D.axisTick.show"></i-switch>
                          </FormItem>
                          <FormItem label="刻度的长度">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.yAxis3D.axisTick.length" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="颜色">
                            <PnColorPicker size="small" v-model="chartOption.yAxis3D.axisTick.lineStyle.color" alpha recommend/>
                          </FormItem>
                          <FormItem label="透明度">
                            <InputNumber size="small" :max="1" :min="0" :step="0.1"
                                         v-model="chartOption.yAxis3D.axisTick.lineStyle.opacity" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="线宽">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.yAxis3D.axisTick.lineStyle.width" :active-change="false"></InputNumber>
                          </FormItem>
                        </div>
                      </Panel>
                      <Panel>
                        坐标轴刻度标签
                        <div slot="content">
                          <FormItem label="显示">
                            <i-switch size="small" v-model="chartOption.yAxis3D.axisLabel.show"></i-switch>
                          </FormItem>
                          <FormItem label="标签与轴线间距">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.yAxis3D.axisLabel.margin" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="颜色">
                            <PnColorPicker size="small" v-model="chartOption.yAxis3D.axisLabel.textStyle.color" alpha recommend/>
                          </FormItem>
                          <FormItem label="字号">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.yAxis3D.axisLabel.textStyle.fontSize" :active-change="false"></InputNumber>
                          </FormItem>
                        </div>
                      </Panel>
                      <Panel>
                        坐标轴区域内轴线
                        <div slot="content">
                          <FormItem label="显示">
                            <i-switch size="small" v-model="chartOption.yAxis3D.splitLine.show"></i-switch>
                          </FormItem>
                          <FormItem label="颜色">
                            <PnColorPicker size="small" v-model="chartOption.yAxis3D.splitLine.lineStyle.color" alpha recommend/>
                          </FormItem>
                          <FormItem label="透明度">
                            <InputNumber size="small" :max="1" :min="0" :step="0.1"
                                         v-model="chartOption.yAxis3D.splitLine.lineStyle.opacity" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="线宽">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.yAxis3D.splitLine.lineStyle.width" :active-change="false"></InputNumber>
                          </FormItem>
                        </div>
                      </Panel>
                    </Collapse>
                  </Form>
                </div>
              </Panel>
              <Panel>
                z轴
                <div slot="content">
                  <Form :label-width="120">
                    <FormItem label="坐标轴名称">
                      <Input size="small" v-model="chartOption.zAxis3D.name"/>
                    </FormItem>
                    <FormItem label="名称与轴线间距">
                      <InputNumber size="small" :max="100" :min="0" :step="1"
                                   v-model="chartOption.zAxis3D.nameGap" :active-change="false"></InputNumber>
                    </FormItem>
                    <FormItemPanel title="坐标轴名称样式">
                      <FormItem label="颜色">
                        <PnColorPicker size="small" v-model="chartOption.zAxis3D.nameTextStyle.color" alpha recommend/>
                      </FormItem>
                      <FormItem label="字号">
                        <InputNumber size="small" :max="100" :min="0" :step="1"
                                     v-model="chartOption.zAxis3D.nameTextStyle.fontSize" :active-change="false"></InputNumber>
                      </FormItem>
                    </FormItemPanel>
                    <Collapse value="0" accordion>
                      <Panel>
                        坐标轴轴线
                        <div slot="content">
                          <FormItem label="颜色">
                            <PnColorPicker size="small" v-model="chartOption.zAxis3D.axisLine.lineStyle.color" alpha recommend/>
                          </FormItem>
                          <FormItem label="透明度">
                            <InputNumber size="small" :max="1" :min="0" :step="0.1"
                                         v-model="chartOption.zAxis3D.axisLine.lineStyle.opacity" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="线宽">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.zAxis3D.axisLine.lineStyle.width" :active-change="false"></InputNumber>
                          </FormItem>
                        </div>
                      </Panel>
                      <Panel>
                        坐标轴刻度
                        <div slot="content">
                          <FormItem label="显示">
                            <i-switch size="small" v-model="chartOption.zAxis3D.axisTick.show"></i-switch>
                          </FormItem>
                          <FormItem label="刻度的长度">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.zAxis3D.axisTick.length" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="颜色">
                            <PnColorPicker size="small" v-model="chartOption.zAxis3D.axisTick.lineStyle.color" alpha recommend/>
                          </FormItem>
                          <FormItem label="透明度">
                            <InputNumber size="small" :max="1" :min="0" :step="0.1"
                                         v-model="chartOption.zAxis3D.axisTick.lineStyle.opacity" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="线宽">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.zAxis3D.axisTick.lineStyle.width" :active-change="false"></InputNumber>
                          </FormItem>
                        </div>
                      </Panel>
                      <Panel>
                        坐标轴刻度标签
                        <div slot="content">
                          <FormItem label="显示">
                            <i-switch size="small" v-model="chartOption.zAxis3D.axisLabel.show"></i-switch>
                          </FormItem>
                          <FormItem label="标签与轴线间距">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.zAxis3D.axisLabel.margin" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="颜色">
                            <PnColorPicker size="small" v-model="chartOption.zAxis3D.axisLabel.textStyle.color" alpha recommend/>
                          </FormItem>
                          <FormItem label="字号">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.zAxis3D.axisLabel.textStyle.fontSize" :active-change="false"></InputNumber>
                          </FormItem>
                        </div>
                      </Panel>
                      <Panel>
                        坐标轴区域内轴线
                        <div slot="content">
                          <FormItem label="显示">
                            <i-switch size="small" v-model="chartOption.zAxis3D.splitLine.show"></i-switch>
                          </FormItem>
                          <FormItem label="颜色">
                            <PnColorPicker size="small" v-model="chartOption.zAxis3D.splitLine.lineStyle.color" alpha recommend/>
                          </FormItem>
                          <FormItem label="透明度">
                            <InputNumber size="small" :max="1" :min="0" :step="0.1"
                                         v-model="chartOption.zAxis3D.splitLine.lineStyle.opacity" :active-change="false"></InputNumber>
                          </FormItem>
                          <FormItem label="线宽">
                            <InputNumber size="small" :max="100" :min="0" :step="1"
                                         v-model="chartOption.zAxis3D.splitLine.lineStyle.width" :active-change="false"></InputNumber>
                          </FormItem>
                        </div>
                      </Panel>
                    </Collapse>
                  </Form>
                </div>
              </Panel>
              <Panel>
                视觉映射
                <div slot="content">
                  <EchartsVisualMapConfigForm v-model="chartOption"></EchartsVisualMapConfigForm>
                </div>
              </Panel>
            </Collapse>
          </TabPane>
          <TabPane tab="main_tabs_child" label="系列配置">
            <Form :label-width="120">
              <FormItem label="系列名称">
                <Input size="small" v-model="chartOption.series.name"/>
              </FormItem>
              <FormItem label="圆角">
                <InputNumber size="small" :max="1" :min="0" :step="0.1"
                             v-model="chartOption.series.bevelSize" :active-change="false"></InputNumber>
              </FormItem>
              <FormItem label="柱子颜色">
                <PnColorPicker size="small" v-model="chartOption.series.itemStyle.color" alpha recommend/>
              </FormItem>
              <FormItem label="透明度">
                <InputNumber size="small" :max="1" :min="0" :step="0.1"
                             v-model="chartOption.series.itemStyle.opacity" :active-change="false"></InputNumber>
              </FormItem>
              <Collapse value="0" accordion>
                <Panel>
                  柱子标签
                  <div slot="content">
                    <FormItem label="显示">
                      <i-switch size="small" v-model="chartOption.series.label.show"></i-switch>
                    </FormItem>
                    <FormItem label="标签与柱子间距">
                      <InputNumber size="small" :max="100" :min="0" :step="1"
                                   v-model="chartOption.series.label.distance" :active-change="false"></InputNumber>
                    </FormItem>
                    <FormItemPanel title="格式化">
                      <CodeEditor v-model="chartOption.series.label.formatter"
                                  :placeholder="'(params) => {\n  return params.value[2]\n}'" :showLint="false"></CodeEditor>
                    </FormItemPanel>
                    <FormItem label="字体颜色">
                      <PnColorPicker size="small" v-model="chartOption.series.label.textStyle.color" alpha recommend/>
                    </FormItem>
                    <FormItem label="字体大小">
                      <InputNumber size="small" :max="100" :min="0" :step="1"
                                   v-model="chartOption.series.label.textStyle.fontSize" :active-change="false"></InputNumber>
                    </FormItem>
                  </div>
                </Panel>
              </Collapse>
            </Form>
          </TabPane>
        </Tabs>

      </TabPane>
      <TabPane name="extend_tab" tab="main_tabs" label="扩展配置">
        <Container v-if="mainTabsValue == 'extend_tab'">
          <CustomOptionDocument :componentId="id"></CustomOptionDocument>
          <CodeEditor v-model="customOption" mode="json"></CodeEditor>
          <EchartsSpreadingCodeForm v-model="echartsSpreadingCode"></EchartsSpreadingCodeForm>
        </Container>
      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="Bar3DChart"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">

          <!--如果组件不需要支持内置交互流接收权限，可以删除下面这个组件InteractionReceive-->
          <InteractionReceive></InteractionReceive>

          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="数据项点击时运行">
            <Alert style="padding: 5px;">此脚本中，使用_this指向当前组件vm实例，通过params可获取点击项数据</Alert>
            <CodeEditor v-model="dataItemClickJsCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'Bar3DChartForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {}
    },
    mounted() {

    },
    methods: {},
    computed: {
      ...mapFields({

        chartOption: 'component.compConfigData.chartOption'

      })
    }
  }
</script>

<style scoped>

</style>
